<template>
  <div class="books-container">
    <el-row class="cart-info" type="flex" justify="end" v-if="cartItemCount > 0">
      <el-col :span="4">
        <el-badge :value="cartItemCount" class="cart-badge">
          <el-button type="primary" @click="goToCart">
            购物车 ¥{{ cartTotal.toFixed(2) }}
          </el-button>
        </el-badge>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <!-- 分类侧边栏 -->
      <el-col :span="4">
        <el-card class="categories-card">
          <h3>零食分类</h3>
          <el-menu
            :default-active="currentCategory"
            @select="handleCategorySelect"
            class="category-menu"
          >
            <el-menu-item index="">
              <span class="category-name">全部零食</span>
            </el-menu-item>
            <el-menu-item
              v-for="category in categories"
              :key="category.id"
              :index="category.id.toString()"
            >
              <span class="category-name">{{ category.name }}</span>
              <span class="category-count">
                ({{ getCategoryCount(category.id) }})
              </span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <!-- 图书列表 -->
      <el-col :span="20">
        <el-card>
          <div class="category-title" v-if="currentCategory">
            {{ getCurrentCategoryName() }}
          </div>
          <el-row :gutter="20">
            <el-col
              v-for="book in filteredBooks"
              :key="book.id"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              class="book-item"
            >
              <el-card :body-style="{ padding: '0px' }">
                <img :src="book.coverImage" class="book-image">
                <div class="book-info">
                  <h4 class="book-title">{{ book.title }}</h4>
                  <div class="book-author">作者：{{ book.author }}</div>
                  <div class="book-category">分类：{{ book.categoryName }}</div>
                  <div class="price">¥{{ book.price.toFixed(2) }}</div>
                  <div class="book-actions">
                    <el-button type="primary" size="small" @click="addToCart(book)">
                      加入购物车
                    </el-button>
                    <el-button type="success" size="small" @click="buyNow(book)">
                      立即购买
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  name: 'ProductListPage',
  computed: {
    ...mapState('products', {
      books: state => state.books,
      categories: state => state.categories,
      currentCategory: state => state.currentCategory
    }),
    ...mapGetters('cart', [
      'cartTotal',
      'cartItemCount'
    ]),
    filteredBooks() {
      if (!this.currentCategory) return this.books
      return this.books.filter(book => book.categoryId === parseInt(this.currentCategory))
    }
  },
  methods: {
    ...mapActions('products', [
      'fetchBooks',
      'fetchCategories',
      'setCategory'
    ]),
    
    handleCategorySelect(categoryId) {
      this.setCategory(categoryId || null)
    },
    
    getCategoryCount(categoryId) {
      return this.books.filter(book => book.categoryId === categoryId).length
    },
    
    getCurrentCategoryName() {
      if (!this.currentCategory) return '全部图书'
      const category = this.categories.find(c => c.id === parseInt(this.currentCategory))
      return category ? category.name : '全部图书'
    },

    addToCart(book) {
      this.$store.commit('cart/ADD_TO_CART', book)
      this.$message({
        message: `已将《${book.title}》加入购物车`,
        type: 'success'
      })
    },

    buyNow(book) {
      this.addToCart(book)
      this.goToCart()
    },

    goToCart() {
      this.$router.push('/cart')
    }
  },
  created() {
    this.fetchBooks()
    this.fetchCategories()
  }
}
</script>

<style scoped>
.books-container {
  padding: 20px;
}

.categories-card {
  margin-bottom: 20px;
}

.category-menu {
  border-right: none;
}

.category-name {
  font-size: 14px;
}

.category-count {
  color: #909399;
  font-size: 12px;
  margin-left: 4px;
}

.category-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #303133;
}

.book-item {
  margin-bottom: 20px;
}

.book-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.book-info {
  padding: 14px;
}

.book-title {
  margin: 0 0 8px;
  font-size: 16px;
  color: #303133;
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.book-author {
  color: #606266;
  font-size: 14px;
  margin-bottom: 4px;
}

.book-category {
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}

.price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}

.book-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.el-button {
  flex: 1;
}

.cart-info {
  margin-bottom: 20px;
}

.cart-badge {
  margin-right: 20px;
}

.cart-badge :deep(.el-badge__content) {
  background-color: #f56c6c;
}
</style>